<template>
	<div id="app">
		
		<!-- 如果已经认证就不能再认证了 显示已经成功认证 -->
		<div class="no_content" v-if="check">
			<icon name="success_rz" scale="12"></icon>
			<div style="left:0;font-size: 18px;">您的认证信息：</div>
			<div style="font-size: 18px;color: gray;">姓名：{{real_name}}</div>
			<div style="font-size: 18px;color: gray;">身份证号：{{id_card}}</div>
			<div style="font-size: 18px;">已成功提交，我们将急速为您审核！</div>
		</div>

		<div style="width: 90%;margin: 0 auto;" v-if="check_two">
			<div style="padding-top: 5%;" >
				<icon name="warn" scale="2"></icon><span style="margin-left: 3%;">填写您的真实数据哦,我们将对您的数据进行审核</span>
				<v-form ref="form" v-model="valid" lazy-validation>
					<v-text-field v-model="real_name" label="真实姓名" validate-on-blur :rules="[rules.requiredName, rules.checkIName]"
						placeholder=""></v-text-field>
					<v-text-field v-model="id_card" :rules="[rules.requiredCard, rules.checkIdCard]" label="身份证号" validate-on-blur
						placeholder=""></v-text-field>
					<v-btn block color="#FF5252" :disabled="!valid" class="mr-4" @click="validate" style="font-size: 17px;color:white;	position: fixed;
	bottom: 0;left:0">
						提交认证
					</v-btn>
				</v-form>
			</div>
		</div>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "IdCardAuth",
		data() {
			return {
				check:false,
				check_two:false,
				real_name: '',
				id_card: '',
				valid: true,
				timeout:2000,
				message:'',
				snackbar:false,
				rules: {
					requiredName: value => !!value || "请输入真实姓名",
					requiredCard: value => !!value || "请输入身份证号",
					checkIName: value => {
						const pattern = /^([\u4e00-\u9fa5]){2,7}$/;
						return pattern.test(value) || "真实姓名格式错误";
					},
					checkIdCard: value => {
						const pattern = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
						return pattern.test(value) || "身份证号格式错误";
					},
				}
			}
		},
		methods: {
			validate() {
				if (this.$refs.form.validate()) {
					let _this = this;
					axios
						.post("/api/v1.0/users/auth_card", {
							real_name: _this.real_name,
							id_card: _this.id_card,
						}).then(function(response) {
							if (response.data.errno === '0') {
								_this.snackbar = true;
								_this.message = response.data.errmsg;
								setTimeout(function() {
									location.reload()
								}, 1000);
								console.log(response.data.data)
							} else if (response.data.errno === '4101') {
								// 未登跳转到登录页面
								_this.snackbar = true;
								_this.message = response.data.errmsg;
								setTimeout(function() {
									_this.$router.replace({
										path: "/login"
									});
								}, 1000);
							} else {
								// 保存失败提示信息
								_this.snackbar = true;
								_this.message = '认证失败';
							}
						})
						.catch(function() {
							_this.message = "连接服务器失败！";
						});
				}
			},
			reset() {
				this.$refs.form.reset()
			},
			resetValidation() {
				this.$refs.form.resetValidation()
			},
		},
		mounted(){
			let _this = this;
			axios
				.get("/api/v1.0/user/auth_card")
				.then(function(response) {
					if (response.data.errno === '0') {
						console.log(response.data.data);
						_this.real_name = response.data.data.real_name;
						_this.id_card = response.data.data.id_card;
						// 判断是否已经认证
						if(_this.real_name !== null){
							_this.check = true;
						}else{
							_this.check_two = true;
						}
					} else if (response.data.errno === '4101') {
						// 未登跳转到登录页面
						_this.goLogin()
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
	}
</script>

<style scoped>

</style>
